{% extends "technological/base.html" %}

{% block page_link %}
    <script src="../../static/technological/js/workflow_setting.js"></script>
    <link rel="stylesheet" href="../../static/technological/css/style.css">
{% endblock %}


{% block style %}
    <style>
        .add_class{
            background: #1E90FF;
        }
        .pre-loader {
            position: absolute;
            top: calc(50% - 32px);
            left: calc(50% - 32px);
            width: 64px;
            height: 64px;
            border-radius: 50%;
            perspective: 800px
        }

        .pre-loader .inner {
            position: absolute;
            box-sizing: border-box;
            width: 100%;
            height: 100%;
            border-radius: 50%
        }

        .pre-loader .inner.one {
            left: 0;
            top: 0;
            -webkit-animation: rotate-one 1s linear infinite;
            animation: rotate-one 1s linear infinite;
            border-bottom: 3px solid #bc9048
        }

        .pre-loader .inner.two {
            right: 0;
            top: 0;
            -webkit-animation: rotate-two 1s linear infinite;
            animation: rotate-two 1s linear infinite;
            border-right: 3px solid #74aeff
        }

        .pre-loader .inner.three {
            right: 0;
            bottom: 0;
            -webkit-animation: rotate-three 1s linear infinite;
            animation: rotate-three 1s linear infinite;
            border-top: 3px solid #caef74
        }

        @keyframes rotate-one {
            0% {
                -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0);
                transform: rotateX(35deg) rotateY(-45deg) rotateZ(0)
            }
            100% {
                -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
                transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg)
            }
        }

        @keyframes rotate-two {
            0% {
                -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(0);
                transform: rotateX(50deg) rotateY(10deg) rotateZ(0)
            }
            100% {
                -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
                transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg)
            }
        }

        @keyframes rotate-three {
            0% {
                -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(0);
                transform: rotateX(35deg) rotateY(55deg) rotateZ(0)
            }
            100% {
                -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
                transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg)
            }
        }

        .basic-tabs{
            box-shadow: 0 1.5px 0 0 #1E90FF;
            color: #1E90FF;
        }
        .basic{
            width: 8%;height: 40px;line-height: 40px;text-align: center;display: inline-block;vertical-align: top;cursor: pointer;
        }
        .preserve{
            height: 30px;width: 90%;background: #0070c1;color: #ffffff;border-radius: 3px
        }
        ul,li{list-style:none;}
        :focus{outline: none;}
        input[type=text]{border:1px solid #ccc;}
        input[type=text]:hover,input[type=text]:focus{border-color: #57bc80; box-shadow: none;}

        .my-select-box{position: relative;}
        .my-select-box .my-select-input{ height: 24px; line-height: 24px; padding:0 5px;
            background: url() right center no-repeat;
            padding-right:20px !important;
            width:100%;
            box-sizing: border-box;
        }
        .my-select-box .my-select-list{position:absolute; left:0; z-index: 101; border:1px solid #ccc; border-top:none; max-height: 120px; overflow-y: auto; display: none; background: #fff; width:100%; box-sizing: border-box;}
        .my-select-box .my-select-list li{height: 22px; line-height: 22px; padding:0 3px; cursor:pointer; margin-bottom: 1px}
        .my-select-box .my-select-list li.choosed{background: #ccc; color:#fff;}
        .my-select-box .my-select-list li:hover{background: #ccc; color:#fff;}
    </style>
{% endblock %}



{% block right_content %}
    <div class="headline">
        <div style="width: 15%;height: 100%;line-height: 40px;float: left;padding-left: 1%;">
            <a href="workflow_table.html" style="color: #0b0b0b;">
                <i class="iconfont icon-liuchengshezhi1"></i>
                <span> 流程设置</span> <span> > </span> <span> <a href="workflow_setting.html" style="color: black;">表单设计</a></span>
            </a>
        </div>

        <div style="width: 7%;text-align: center;height: 100%;line-height: 40px;float: right;">
{#            <button id="add_station" type="button" class="btn btn-default add-station preserve" onclick="Export()">下一步</button>#}
            <button id="add_station" type="button" class="btn btn-default add-station preserve" onclick="check_val()">下一步</button>
        </div>
        <button id="affirm" data-toggle="modal" data-target=".bd-example-modal-sm" style="display: none;" type="button" class="btn btn-danger add-station1"></button>
    </div>

    <div style="width: 100%;height: 40px;padding-left: 3%;box-shadow: 0 1px 0 0 #CFCFCF;">
        <div id="definition-flow" class="basic basic-tabs" onclick="Control_navigation(this.id)">
            流程定义
        </div>

        <div id="create-menu" class="basic" onclick="Control_navigation(this.id)">
            表单定义
        </div>

        <div id="create-flow" class="basic" onclick="Control_navigation(this.id)">
            流程创建
        </div>
    </div>

    <!-- 流程定义 -->
    <div id="definition" style="width: 100%;height: 88%;display: inline-block;margin-top: 0.2%;text-align: center;">
        <div style="margin-top: 10%;">
            <label for=""><span style="color: red;">* </span>表单名称：</label>
            <input id="table_name" type="text" style="width: 40%;height: 35px;border-radius: 3px;display: inline-block;border: #cfcfcf solid 1px;padding-left: 0.5%;">
        </div>
        <div style="margin-top: 2%;">
            <label for="" style="vertical-align: center;"><span style="color: red;">* </span>流程类别：</label>
            <div class="my-select-box" style="width: 40%;display: inline-block;font-size: 0;vertical-align: center;">
                <input id="regimentation" type="text" class="my-select-input" placeholder="输入或选择类别" maxlength="20" style="height: 35px;border-radius: 3px;font-size: 14px;" autocomplete="off"/>
                <ul class="my-select-list" style="width: 100%;margin: 0;padding: 0;">
                    {% for foo in category_list %}
                        <li data-value="1" style="width: 100%;font-size: 14px;text-align: left;margin-top: 1%;color: #454d55;padding-left: 1%;"> {{ foo }}</li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>

    <!-- 流程图 -->
    <div id="flow" class="flow_chart" style="width: 100%;height: 88%;display: none;margin-top: 0.2%;">
        <div id="flow_chart"></div>
        <textarea name="" id="result" cols="30" style="display: none;"></textarea>
    </div>

    <!-- 表单 -->
    <div id="menu" style="width: 100%;height: 88%;overflow: auto;margin-top: 0.2%;font-size: 0;display: none;">
        <div id="app" style="font-size: 18px;"></div>
        <div class="pre-loader" id="pre-loader">
            <div class="inner one"></div>
            <div class="inner two"></div>
            <div class="inner three"></div>
        </div>
    </div>


    <!--确认删除？-->
    <div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog"  aria-hidden="true">
        <div class="modal-dialog modal-sm" style="margin-top: 10%;">
            <div class="modal-content" style="height: 100px;border-radius: 7px;width: 300px;background: #F8F8FF;border: #1E90FF solid 1px;">
                <div class="modal-header" style="height: 40px;background: #1E90FF;border-top-left-radius: 7px;border-top-right-radius: 7px;">
                    <h5 class="modal-title" style="line-height: 40px;width: 40%;text-align: center;color: #ffffff;">
                        提示对话框
                    </h5>
                    <button id="close-model2" type="button" class="close" data-dismiss="modal" aria-label="Close" style="margin-right: 3%;line-height: 40px;">
                        <span aria-hidden="true" style="font-size: 28px;color: white;">&times;</span>
                    </button>
                </div>
                <div class="modal-body" style="height: 50px;line-height: 60px;text-align: center;">
                    <p id="Confirm-content" >保存成功！</p>
                </div>
            </div>
        </div>
    </div>

{% endblock %}


{% block script %}
    <script type="text/javascript" src="../../static/public_file/other/jquery.js"></script>
    <script type="text/javascript" src="../../static/public_file/GooFlow/data.js"></script>
    <script type="text/javascript" src="../../static/public_file/js/GooFunc.js"></script>
    <script type="text/javascript" src="../../static/public_file/js/json2.js"></script>
    <script type="text/javascript" src="../../static/public_file/GooFlow/codebase/GooFlow.js"></script>
    <script src="../../static/public_file/formdesigner/js/chunk-vendors.effac898.js"></script>
    <script src="../../static/public_file/formdesigner/js/index.207dfb27.js"></script>
    <script type="text/javascript">
        var property = {
            toolBtns: ["join", "fork"],
            haveHead: false,
            headBtns: [], //如果haveHead=true，则定义HEAD区的按钮
            haveTool: true,
            haveGroup: true,
            useOperStack: true
        };
        var demo;
        $(document).ready(function() {
            demo = $.createGooFlow($("#flow_chart"), property);
            demo.loadData(jsondata);
        });
        var out;
        function Export() {
            var flowStr = JSON.stringify(demo.exportData());
            var TableJson = window.TableJson;
            var regimentation = document.getElementById("regimentation").value;
            var table_name = document.getElementById("table_name").value;

            var xhr = new XMLHttpRequest();
            var local_host = window.location.host;          // 获取当前IP
            xhr.open('post', "/technological/workflow_setting.html", true);
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
            xhr.send("flowStr="+String(flowStr)+"&TableJson="+JSON.stringify(TableJson)+"&regimentation="+String(regimentation)+"&table_name="+String(table_name));
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display = "none";
                        var JsonDate = JSON.parse(xhr.responseText);
                        if (JsonDate["code"] === 200){
                            alert("保存成功");
                            window.location = "/technological/workflow_table.html";
                        }
                    }
                }
            };
        }


        ;(function($){
            $.fn.MySelect=function(){
                this.each(function(){
                    var $box=$(this);
                    var $input=$box.find("input.my-select-input");  //输入框
                    var $list=$input.next();                          //ul装扮成下拉框
                    var inputHeight=$input.outerHeight();   //计算input输入框的高度和宽度，方便定位ul和设置ul及包裹元素的宽度
                    //var inputWidth=$input.innerWidth();
                    $list.css({"top":(inputHeight)});
                    //$box.width($input.outerWidth());

                    $input.focus(function(){   //输入框获得焦点后，显示下拉选择ul
                        var $nextUl=$(this).next();
                        if($nextUl.children().length>0){
                            $(this).next().show();
                        }
                    }).bind('input propertychange',function(){  //绑定监测输入框的输入值更改
                        var $this=$(this);
                        $this.attr("data-id","");
                        var curText=$this.val();
                        var $nextUl=$(this).next();
                        if($nextUl.children().length>0){
                            $nextUl.find("li").removeClass("choosed");
                            $nextUl.find("li").each(function(i,item){
                                var txt=$(item).text();
                                if(txt===curText){
                                    var v=$(item).attr("data-value");
                                    $this.attr("data-id",v);
                                    $(item).addClass("choosed");
                                }
                            });
                        }
                    });
                    //修改成如下事件绑定，为了给动态添加的li也可以产生点击效果
                    $list.off('click', 'li').on('click', 'li', function (e) {
                        var $this = $(this);
                        var value = $this.attr("data-value") || '';
                        $input.val($this.text()).attr("data-id", value);
                        $this.addClass("choosed").siblings().removeClass("choosed");
                        $this.parent().hide();
                    });
                });

                $(document).click(function (e) {  //点击.my-select-box范围外时隐藏ul下拉框
                    var target=e.target;
                    var $target=$(target);
                    var $parent=$target.closest('.my-select-box');
                    if($parent.length<1){  //说明不是.my-select-box范围内点击，将ul隐藏
                        $(".my-select-list").hide();
                    }else if($parent.length==1){  //如果存在多个my-select-box的情况，将其余的非这项以外的都隐藏
                        var $ul=$parent.find(".my-select-list");
                        var flag=$ul.is(":hidden");
                        $(".my-select-list").hide();
                        if(!flag) $ul.show();
                    }
                });
                return this;
            }
        })(jQuery);

        $(".my-select-box").MySelect();
    </script>
{% endblock %}
